<template>
    <div class="diverse-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧数据区 -->
            <div class="left-section">
                <!-- 包容性指数 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🤝</span>
                        包容性指数
                    </div>
                    <div class="inclusivity-score">
                        <div class="score-display">
                            <div class="score-circle">
                                <div class="score-value">96.2</div>
                                <div class="score-label">包容指数</div>
                            </div>
                        </div>
                        <div class="score-breakdown">
                            <div class="breakdown-item" v-for="(item, index) in inclusivityBreakdown" :key="index">
                                <div class="breakdown-label">{{ item.label }}</div>
                                <div class="breakdown-bar">
                                    <div class="bar-fill" :style="{ width: item.value + '%' }"></div>
                                </div>
                                <div class="breakdown-value">{{ item.value }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 国际友好城市 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🌍</span>
                        国际友好城市
                    </div>
                    <div class="sister-cities">
                        <div class="city-item" v-for="(city, index) in sisterCities" :key="index">
                            <div class="city-flag">{{ city.flag }}</div>
                            <div class="city-info">
                                <div class="city-name">{{ city.name }}</div>
                                <div class="city-country">{{ city.country }}</div>
                                <div class="city-relation">{{ city.relation }}</div>
                            </div>
                            <div class="city-years">{{ city.years }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间展示区 -->
            <div class="center-section">
                <!-- 文化多样性展示 -->
                <div class="culture-diversity">
                    <div class="diversity-header">
                        <span class="icon">🎭</span>
                        广州文化多样性
                    </div>
                    <div class="diversity-showcase">
                        <div class="showcase-item" v-for="(item, index) in cultureShowcase" :key="index" :class="item.type">
                            <div class="showcase-icon">{{ item.icon }}</div>
                            <div class="showcase-content">
                                <div class="showcase-title">{{ item.title }}</div>
                                <div class="showcase-desc">{{ item.desc }}</div>
                                <div class="showcase-stats">
                                    <span class="stat">{{ item.stat1 }}</span>
                                    <span class="stat">{{ item.stat2 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 多元文化活动轮播 -->
                <div class="cultural-activities">
                    <el-carousel height="330px" :interval="4000" arrow="always" indicator-position="outside">
                        <el-carousel-item v-for="(activity, index) in culturalActivities" :key="index">
                            <div class="activity-content">
                                <div class="activity-image-wrapper">
                                    <el-image :src="activity.image" fit="cover" class="activity-image"></el-image>
                                </div>
                                <div class="activity-info">
                                    <h3 class="activity-title">{{ activity.title }}</h3>
                                    <p class="activity-desc">{{ activity.desc }}</p>
                                    <div class="activity-meta">
                                        <span class="activity-time">{{ activity.time }}</span>
                                        <span class="activity-location">{{ activity.location }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>

            <!-- 右侧数据区 -->
            <div class="right-section">
                <!-- 人口多样性分析 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">👥</span>
                        人口多样性
                    </div>
                    <div class="population-chart" ref="populationChart"></div>
                </div>
                
                <!-- 语言文化分布 -->
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🗣️</span>
                        语言文化分布
                    </div>
                    <div class="language-chart" ref="languageChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus'

import blhImg from '@/assets/img/diverse/blh.png'
import dgjImg from '@/assets/img/diverse/dgj.png'
import gjhImg from '@/assets/img/diverse/gjh.png'
import gzmsjImg from '@/assets/img/diverse/gzmsj.png'
import jlpjImg from '@/assets/img/diverse/jlpj.png'

// 包容性指数细分
const inclusivityBreakdown = ref([
    { label: '文化包容', value: 98, color: '#00a1ff' },
    { label: '国际交流', value: 95, color: '#00ff88' },
    { label: '社会融合', value: 94, color: '#ff6b6b' },
    { label: '教育平等', value: 96, color: '#ffd700' },
    { label: '就业机会', value: 93, color: '#9370db' }
])

// 国际友好城市
const sisterCities = ref([
    { flag: '🇯🇵', name: '福冈', country: '日本', relation: '友好城市', years: '1979年缔结' },
    { flag: '🇰🇷', name: '光州', country: '韩国', relation: '友好城市', years: '1996年缔结' },
    { flag: '🇺🇸', name: '洛杉矶', country: '美国', relation: '友好城市', years: '1981年缔结' },
    { flag: '🇫🇷', name: '里昂', country: '法国', relation: '友好城市', years: '1988年缔结' },
    { flag: '🇩🇪', name: '法兰克福', country: '德国', relation: '友好城市', years: '1988年缔结' },
    { flag: '🇦🇺', name: '悉尼', country: '澳大利亚', relation: '友好城市', years: '1986年缔结' }
])

// 文化多样性展示
const cultureShowcase = ref([
    { 
        icon: '🏛️', 
        title: '岭南文化', 
        desc: '千年广府文化，骑楼、粤剧、粤菜等传统特色', 
        stat1: '2000+年历史', 
        stat2: '非遗项目85项', 
        type: 'traditional' 
    },
    { 
        icon: '🌊', 
        title: '海洋文化', 
        desc: '海上丝绸之路起点，开放包容的海洋文明', 
        stat1: '2000+年海丝', 
        stat2: '贸易伙伴150+', 
        type: 'maritime' 
    },
    { 
        icon: '🏢', 
        title: '现代都市', 
        desc: '国际化大都市，汇聚全球人才和文化', 
        stat1: '外籍人士5万+', 
        stat2: '国际组织50+', 
        type: 'modern' 
    },
    { 
        icon: '🎨', 
        title: '创意文化', 
        desc: '文化创意产业发达，艺术设计氛围浓厚', 
        stat1: '文创企业2万+', 
        stat2: '设计园区30+', 
        type: 'creative' 
    }
])

// 多元文化活动
const culturalActivities = ref([
    { 
        title: '广州国际美食节', 
        desc: '汇聚全球美食，展现广州"食在广州"的包容文化', 
        time: '每年11月', 
        location: '广州塔广场', 
        image: gzmsjImg
    },
    { 
        title: '广交会', 
        desc: '中国进出口商品交易会，促进国际贸易和文化交流', 
        time: '春秋两季', 
        location: '琶洲会展中心', 
        image: gjhImg
    },
    { 
        title: '广州国际灯光节', 
        desc: '国际级灯光艺术盛会，展现广州现代艺术魅力', 
        time: '每年11-12月', 
        location: '花城广场', 
        image: dgjImg
    },
    { 
        title: '广州国际纪录片节', 
        desc: '国际纪录片交流平台，促进文化传播和理解', 
        time: '每年12月', 
        location: '广州图书馆', 
        image: jlpjImg
    },
    { 
        title: '广州国际艺术博览会', 
        desc: '国际艺术交流盛会，汇聚全球艺术精品', 
        time: '每年5月', 
        location: '保利世贸博览馆', 
        image: blhImg
    }
])

// 图表实例
const populationChart = ref<HTMLElement | null>(null)
const languageChart = ref<HTMLElement | null>(null)

const populationChartInstance = ref<echarts.ECharts | null>(null)
const languageChartInstance = ref<echarts.ECharts | null>(null)

// 初始化图表
onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            initCharts();
        }, 100);
    });
})

const initCharts = () => {
    // 人口多样性分析图表
    if (populationChart.value) {
        const chart = echarts.init(populationChart.value)
        populationChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['本地人口', '外来人口', '外籍人士'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['天河区', '越秀区', '海珠区', '荔湾区', '白云区', '黄埔区'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '本地人口',
                    type: 'bar',
                    stack: 'total',
                    data: [45, 52, 48, 55, 42, 38],
                    itemStyle: {
                        color: '#00a1ff'
                    }
                },
                {
                    name: '外来人口',
                    type: 'bar',
                    stack: 'total',
                    data: [35, 28, 32, 25, 38, 42],
                    itemStyle: {
                        color: '#00ff88'
                    }
                },
                {
                    name: '外籍人士',
                    type: 'bar',
                    stack: 'total',
                    data: [20, 20, 20, 20, 20, 20],
                    itemStyle: {
                        color: '#ff6b6b'
                    }
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    // 语言文化分布图表
    if (languageChart.value) {
        const chart = echarts.init(languageChart.value)
        languageChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: { color: '#fff' }
            },
            series: [
                {
                    name: '语言分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['60%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 45, name: '粤语', itemStyle: { color: '#00a1ff' } },
                        { value: 30, name: '普通话', itemStyle: { color: '#00ff88' } },
                        { value: 15, name: '英语', itemStyle: { color: '#ff6b6b' } },
                        { value: 5, name: '其他语言', itemStyle: { color: '#ffd700' } },
                        { value: 5, name: '其他方言', itemStyle: { color: '#9370db' } }
                    ]
                }
            ]
        })
        
        setTimeout(() => {
            chart.resize();
        }, 50);
    }
}
</script>

<style scoped lang="scss">
.diverse-container {
    background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #2d3748 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .main-content {
        height: 100%;
        overflow: auto;
        flex: 1;
        display: flex;
        gap: 20px;

        .left-section, .right-section {
            width: 30%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                overflow-x: hidden;
                overflow-y: auto;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                flex: 1;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 20px;
                    color: #00d4ff;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-weight: 600;

                    .icon {
                        font-size: 24px;
                    }
                }

                .inclusivity-score {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 20px;

                    .score-display {
                        .score-circle {
                            width: 120px;
                            height: 120px;
                            border-radius: 50%;
                            background: linear-gradient(135deg, #00d4ff, #0099cc);
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);

                            .score-value {
                                font-size: 28px;
                                font-weight: bold;
                                color: #fff;
                            }

                            .score-label {
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.8);
                            }
                        }
                    }

                    .score-breakdown {
                        width: 100%;

                        .breakdown-item {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 12px;

                            .breakdown-label {
                                font-size: 12px;
                                color: #a0a0a0;
                                min-width: 60px;
                            }

                            .breakdown-bar {
                                flex: 1;
                                height: 6px;
                                background: rgba(255, 255, 255, 0.1);
                                border-radius: 3px;
                                overflow: hidden;

                                .bar-fill {
                                    height: 100%;
                                    background: linear-gradient(90deg, #00d4ff, #00a1ff);
                                    border-radius: 3px;
                                    transition: width 0.3s ease;
                                }
                            }

                            .breakdown-value {
                                font-size: 12px;
                                color: #00d4ff;
                                font-weight: bold;
                                min-width: 35px;
                            }
                        }
                    }
                }

                .sister-cities {
                    overflow-y: auto;
                    max-height: calc(100% - 60px);
                    
                    &::-webkit-scrollbar {
                        width: 4px;
                    }
                    
                    &::-webkit-scrollbar-track {
                        background: rgba(255, 255, 255, 0.05);
                    }
                    
                    &::-webkit-scrollbar-thumb {
                        background: rgba(0, 212, 255, 0.5);
                        border-radius: 2px;
                    }

                    .city-item {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        padding: 15px;
                        margin-bottom: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;
                        transition: all 0.3s ease;

                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                            transform: translateX(5px);
                        }

                        .city-flag {
                            font-size: 32px;
                            width: 50px;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(0, 212, 255, 0.1);
                            border-radius: 10px;
                        }

                        .city-info {
                            flex: 1;

                            .city-name {
                                font-size: 16px;
                                font-weight: 600;
                                margin-bottom: 5px;
                            }

                            .city-country {
                                font-size: 12px;
                                color: #a0a0a0;
                                margin-bottom: 5px;
                            }

                            .city-relation {
                                font-size: 12px;
                                color: #00ff88;
                                padding: 2px 8px;
                                background: rgba(0, 255, 136, 0.1);
                                border-radius: 4px;
                                display: inline-block;
                            }
                        }

                        .city-years {
                            font-size: 12px;
                            color: #00d4ff;
                        }
                    }
                }

                .population-chart,
                .language-chart {
                    height: calc(100% - 60px);
                }
            }
        }

        .center-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .culture-diversity {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-sizing: border-box;

                .diversity-header {
                    font-size: 20px;
                    font-weight: 600;
                    color: #00d4ff;
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .icon {
                        font-size: 28px;
                    }
                }

                .diversity-showcase {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 15px;

                    .showcase-item {
                        padding: 15px;
                        background: rgba(255, 255, 255, 0.05);
                        border-radius: 10px;
                        border: 2px solid transparent;
                        transition: all 0.3s ease;

                        &:hover {
                            transform: translateY(-5px);
                            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                        }

                        &.traditional {
                            border-color: #00a1ff;
                            background: rgba(0, 161, 255, 0.05);
                        }

                        &.maritime {
                            border-color: #00ff88;
                            background: rgba(0, 255, 136, 0.05);
                        }

                        &.modern {
                            border-color: #ff6b6b;
                            background: rgba(255, 107, 107, 0.05);
                        }

                        &.creative {
                            border-color: #ffd700;
                            background: rgba(255, 215, 0, 0.05);
                        }

                        .showcase-icon {
                            font-size: 32px;
                            margin-bottom: 10px;
                        }

                        .showcase-content {
                            .showcase-title {
                                font-size: 16px;
                                font-weight: 600;
                                margin-bottom: 8px;
                            }

                            .showcase-desc {
                                font-size: 12px;
                                color: #a0a0a0;
                                margin-bottom: 10px;
                                line-height: 1.4;
                            }

                            .showcase-stats {
                                display: flex;
                                gap: 10px;

                                .stat {
                                    font-size: 11px;
                                    color: #00d4ff;
                                    background: rgba(0, 212, 255, 0.1);
                                    padding: 3px 8px;
                                    border-radius: 4px;
                                }
                            }
                        }
                    }
                }
            }

            .cultural-activities {
                flex: 1;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 15px;
                padding: 20px;
                backdrop-filter: blur(15px);
                border: 1px solid rgba(255, 255, 255, 0.1);

                :deep(.el-carousel) {
                    .el-carousel__container {
                        border-radius: 10px;
                        overflow: hidden;
                    }

                    .el-carousel__arrow {
                        background-color: rgba(0, 212, 255, 0.7);
                        
                        &:hover {
                            background-color: rgba(0, 212, 255, 0.9);
                        }
                    }

                    .el-carousel__indicators {
                        .el-carousel__button {
                            background-color: rgba(0, 212, 255, 0.7);
                        }
                    }
                }

                .activity-content {
                    position: relative;
                    height: 100%;

                    .activity-image-wrapper {
                        height: 100%;
                        width: 100%;
                        
                        .activity-image {
                            height: 100%;
                            width: 100%;
                        }
                    }

                    .activity-info {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        padding: 20px;
                        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

                        .activity-title {
                            font-size: 20px;
                            margin-bottom: 8px;
                            color: #fff;
                        }

                        .activity-desc {
                            font-size: 14px;
                            color: rgba(255, 255, 255, 0.8);
                            margin-bottom: 10px;
                        }

                        .activity-meta {
                            display: flex;
                            gap: 15px;

                            .activity-time,
                            .activity-location {
                                font-size: 12px;
                                color: #00d4ff;
                                background: rgba(0, 212, 255, 0.1);
                                padding: 4px 8px;
                                border-radius: 4px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.showcase-item {
    animation: pulse 3s infinite;
}
</style>